<template>
    <div class="detail-wrapper">
        <div class="loading-wrapper" v-show="showLoading">
            <loading :showimg="showimg" :desc="loadDesc"></loading>
        </div>

        <div class="slide-wrapper border-bottom-1px" v-show="dataDone">
            <mt-swipe :auto="4000">
                <mt-swipe-item v-for="item in photos"><img v-bind:src="item"></mt-swipe-item>
            </mt-swipe>
        </div>

        <div class="detail-text">
            <div class="detail-text-con" v-show="dataDone">
                <div v-if="apiGet=='catPowerDetail'">
                    <p><strong>型号：{{model}}</strong></p>
                    <p>频率：{{frequency}}</p>
                    <p>电压：{{voltage}}</p>
                    <p>功率：{{power}}</p>
                    <p>主用功率：{{mainPower}}</p>
                    <p>备用功率：{{standbyPower}}</p>
                </div>
                <div v-if="apiGet=='catGasDetail'">
                    <p><strong>型&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：{{model}}</strong></p>
                    <p>产品分类：{{productCategory}}</p>
                    <p>品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;牌：{{brand}}</p>
                    <p>应用类型：{{applicationCategory}}</p>
                    <p>功&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;率：{{power}}</p>
                </div>
                <div v-if="apiGet=='catIndustrialDetail'">
                    <p>机&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：{{machineModel}}</p>
                    <p>产品分类：{{productCategory}}</p>
                    <p>排放等级：{{emissionLevels}}</p>
                    <p>发动机排量：{{engineEmission}}</p>
                    <p>功率标定：{{powerCalibration}}</p>
                    <p>bkW：{{power}}</p>
                </div>
                <div v-if="apiGet=='catMarineDetail'">
                    <p><strong>型&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：{{model}}</strong></p>
                    <p>转&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;速：{{turnAround}}</p>
                    <p>产品类型：{{productCategory}}</p>
                    <p>输出功率：{{outputPower}}</p>
                    <p>排放证书：{{emissionCertification}}</p>
                </div>
                <div v-if="apiGet=='catMicrogridDetail'">
                    <p><strong>型&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：{{model}}</strong></p>
                    <p>转&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;速：{{productCategory}}</p>
                    <p>产品类型：{{productCategory}}</p>
                    <p>品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;牌：{{brand}}</p>
                    <p>功&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;率：{{power}}</p>
                </div>
                <div v-if="apiGet=='catOffshoreDetail'">
                    <p><strong>型号：{{model}}</strong></p>
                    <p>功率：{{power}}</p>
                    <p>转速：{{turnAround}}</p>
                    <p>频率：{{frequency}}</p>
                    <p>尺寸：{{size}}</p>
                    <p>排放：{{emission}}</p>
                    <p>重量：{{weight}}</p>
                </div>
                <div v-if="apiGet=='catOnshoreDetail'">
                    <p><strong>型&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：{{model}}</strong></p>
                    <p>产品分类：{{productClassification}}</p>
                    <p>应用类型：{{applicationCategory}}</p>
                    <p>产品类型：{{productCategory}}</p>
                    <p>功率范围：{{powerScope}}</p>
                </div>
                <div v-if="apiGet=='catPropulsionDetail'">
                    <p><strong>型号：{{model}}</strong></p>
                    <p>产品类型：{{productCategory}}</p>
                    <p>输入功率：{{importPower}}</p>
                    <p>最大浆径：{{maxPropellerDiameter}}</p>
                    <p>输入转速：{{importTurnAround}}</p>
                    <p>最大推力：{{maxThrust}}</p>
                </div>
                <div class="instructions" v-show="pdf"><a class="donwload-link" v-bind:href="pdf">产品手册<!-- <i class="border-left-1px icon-donwload"></i> --></a>
                </div>
            </div>
        </div>
        <fixbottom></fixbottom>
    </div>
</template>

<script type="text/javascript">
    import Loading from 'components/loading/loading';
    import Fixbottom from 'components/fixbottom/fixbottom'
    import axios from 'axios';
    import baseFun from '../../common/js/base.js';
    import apiUrl from '../../../config/api';

    
    export default {
        data() {
            return {
                dataDone: false,
                showimg: true,
                loadDesc: "正在载入...",
                showLoading: true,
                apiGet: baseFun.getQueryString('ptype'),

                applicationCategory: "string",
                productCategory: "string",
                model: "string",
                voltage: "string",
                frequency: "string",
                power: "string",
                applicableModel: "string",
                brand: "string",
                productName: "string",
                useIndustry: "string",
                mainPower: "string",
                emissionLevels: "string",
                engineEmission: "string",
                machineModel: "string",
                powerCalibration: "string",
                size: "string",
                emission: "string",
                weight: "string",
                turnAround: "string",
                outputPower: "string",
                emissionCertification: "string",
                productClassification: "string",
                powerScope: "string",
                importPower: "string",
                maxPropellerDiameter: "string",
                importTurnAround: "string",
                maxThrust: "string",
                standbyPower: "string",
                pdf: "",
                photos: []
            }
        },
        created() {
            setTimeout(() => {
                this._getData();
            }, 20);
            
        },
        methods: {
            _getData() {
                let apiurlstr = '';
                switch (this.apiGet) {
                    case 'catPowerDetail':
                        apiurlstr = apiUrl.catPowerDetail;
                        document.title = "Power Generation电力设备";
                        break;
                    case 'catGasDetail':
                        apiurlstr = apiUrl.catGasDetail;
                        document.title = 'Gas燃气发电';
                        break;
                    case 'catOffshoreDetail':
                        apiurlstr = apiUrl.catOffshoreDetail;
                        document.title = 'Offshore海洋平台动力';
                        break;
                    case 'catOnshoreDetail':
                        apiurlstr = apiUrl.catOnshoreDetail;
                        document.title = 'Onshore油田动力';
                        break;
                    case 'catMarineDetail':
                        apiurlstr = apiUrl.catMarineDetail;
                        document.title = 'Marine 船舶动力';
                        break;
                    case 'catPropulsionDetail':
                        apiurlstr = apiUrl.catPropulsionDetail;
                        document.title = 'Propulsion 船舶推进器';
                        break;
                    case 'catIndustrialDetail':
                        apiurlstr = apiUrl.catIndustrialDetail;
                        document.title = 'Industrial工业动力';
                        break;
                    case 'catMicrogridDetail':
                        apiurlstr = apiUrl.catMicrogridDetail;
                        document.title = 'Microgrid微电网';
                        break;
                }
                axios({
                    method: 'get',
                    url: apiurlstr + '?id=' + baseFun.getQueryString('id')
                }).then(response => {
                    if (response.data.code === 'SUCCESS') {
                        let resData = response.data.data;
                        if (!!resData) {
                            this.showLoading = false;
                            this.dataDone = !this.dataDone;

                            this.applicableModel = resData.applicableModel;
                            this.productName = resData.productName;
                            this.useIndustry = resData.useIndustry;
                            this.model = resData.model;
                            this.voltage = resData.voltage;
                            this.frequency = resData.frequency;
                            this.power = resData.power;
                            this.mainPower = resData.mainPower;
                            this.applicationCategory = resData.applicationCategory;
                            this.productCategory = resData.productCategory;
                            this.emissionLevels = resData.emissionLevels;
                            this.engineEmission = resData.engineEmission;
                            this.machineModel = resData.machineModel;
                            this.powerCalibration = resData.powerCalibration;
                            this.turnAround = resData.turnAround;
                            this.outputPower = resData.outputPower;
                            this.emissionCertification = resData.emissionCertification;
                            this.size = resData.size;
                            this.emission = resData.emission;
                            this.weight = resData.weight;
                            this.pdf = resData.pdf;
                            this.brand = resData.brand;
                            this.productClassification = resData.productClassification;
                            this.powerScope = resData.powerScope;
                            this.importPower = resData.importPower;
                            this.maxPropellerDiameter = resData.maxPropellerDiameter;
                            this.importTurnAround = resData.importTurnAround;
                            this.maxThrust = resData.maxThrust;
                            this.standbyPower = resData.standbyPower;
                            let photoArr = resData.photo.split("|");
                            photoArr.splice(0, 1)
                            this.photos = photoArr;

                        }
                    } else {
                        this.showimg = false;
                        this.loadDesc = "请求服务器错误！"
                    }
                })
            }
        },
        components: {
            Loading,
            Fixbottom
        }
    }
</script>

<style lang="less" rel="stylesheet/less">
    @import '../../common/less/index.less';
    .detail-wrapper {
        padding-bottom: 60px;
    }

    .loading-wrapper {
        position: absolute;
        top: 50%;
        width: 100%;
    }

    .slide-wrapper {
        height: 295px;
        width: 100%;
        img {
            width: 100%;
            height: 100%;
        }
        .border-bottom-1px(@color-border);
        .mint-swipe-indicator.is-active {
            background: @color-bg-active;
            opacity: 1;
        }
        &.showbig {
            position: fixed;
            top: 0;
            height: 100%;
            z-index: 8888;
            background-color: rgba(0, 0, 0, 0.5);

            .mint-swipe-items-wrap {
                width: 100%;
                display: table;
            }
            .mint-swipe-item {
                display: table-cell;
                vertical-align: middle;
            }
            img {
                height: auto;
            }
            &:before {
                content: "";
                display: block;
                position: absolute;
                width: 100%;
                height: 100%;
                too: 0;
                bottom: 0;
                left: 0;
                right: 0;

            }
        }
    }
    .detail-text {
        margin: 15px;
        font-size: 14px;
        color: #333;
        position: relative;
        color:#333;
        p {
            line-height: 28px;
        }
        p:first-child {
            font-size: 16px;
        }
    }

    .instructions {
        text-align: right;
        position: absolute; 
        right: 0;
        top: 0;
        .donwload-link {
            font-size: @font-size-meduim;
            background: @color-bg-grayWhite url("../../module/article/icon-pdf.png") 6px center no-repeat;
            display: inline-block;
            color: @color-text-333;
            padding: 10px 6px 10px 26px;
            background-size: 14px 16px;
        }
        .icon-donwload{
            background: url("d.png") no-repeat;
            width: 15px;
            height: 15px;
            display: inline-block;
            background-size: contain;
            vertical-align: top;
            &:before{
                .border-left-1px(#dedede);
            }
        }
    }

</style>
